<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    v-dialogDrag
    :fullscreen="isFullscreen"
    :visible.sync="dialogVisible"
    :before-close="closeForm"
    width="4rem"
  >
    <div slot="title" class="header-title hd-title">
      <span>{{ dialogTitle }}</span>
      <i
        v-if="isFullscreen === false"
        class="el-icon-full-screen"
        @click="fScreen"
      ></i>
      <i v-else class="el-icon-news" @click="ifScreen"></i>
    </div>
    <el-table
      :header-cell-style="{
        background: '#f5f7fa',
        color: '#14142B',
        height: '28px',
        padding: '5px 0',
      }"
      :cell-style="{
        color: '#606266',
        fontSize: '13px',
        padding: '5px 0',
      }"
      border
      :data="tableData"
      style="width: 100%"
    >
      <template slot="empty">
        <img
          class="empty-img"
          src="@/assets/imgs/zanwushuju.svg"
          style="width: 64px; height: 50px"
          alt=""
        />
        <div class="noCart">暂无数据</div>
      </template>
      <el-table-column
        align="center"
        prop="sku_No"
        label="Sku"
        width=""
      ></el-table-column>
      <el-table-column
        align="center"
        prop="product_title.zh"
        label="中文品名"
        width=""
      ></el-table-column>
      <el-table-column
        align="center"
        prop="univalent"
        label="单价(USD)"
        width=""
      ></el-table-column>
      <el-table-column
        align="center"
        prop="hs_code"
        label="HSCODE"
      ></el-table-column>
      <el-table-column align="center" prop="amount" label="数量">
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
export default {
  props: {
    editData: {
      type: Object,
      default: () => ({}),
    },
    dialogTitle: {
      type: String,
      default: "",
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isFullscreen: false,
      tableData: [],
    };
  },
  watch: {
    editData: {
      handler(val) {
        this.tableData = val.Inventory;
      },
    },
  },
  methods: {
    closeForm() {
      this.$emit("closeForm");
      this.isFullscreen = false;
      if (this.$refs["form"] !== undefined) {
        this.tableData = [];
        this.form = {
          product_item_title: {
            zh: "",
          },
        };
        this.$refs["form"].resetFields();
      }
    },
    fScreen() {
      this.isFullscreen = true;
    },
    ifScreen() {
      this.isFullscreen = false;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}

::v-deep .el-input__inner {
  height: 32px;
  line-height: 32px;
}

::v-deep .el-dialog__body {
  padding: 15px 10px;
}

::v-deep .el-dialog__footer {
  padding: 10px 16px;
  border-top: 1px solid #f0f0f0;
}

.el-select-dropdown
  .el-scrollbar
  .el-scrollbar__view
  .el-select-dropdown__item {
  height: auto;
  padding: 0 15px;
}

.hd-title {
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  margin-right: 26px;
}

.el-icon-full-screen {
  cursor: pointer;
}

.el-icon-news {
  cursor: pointer;
}

//表格样式
// 设置表格行高度
::v-deep .el-table__body tr,
::v-deep .el-table__body td {
  padding: 0;
  height: 36px;
}

// 表格内背景颜色
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  font-family: Source Han Sans CN Normal, Source Han Sans CN Normal-Normal;
  font-weight: Normal;
}

// 去掉最下面的那一条线
.el-table::before {
  height: 0px;
}
</style>
